<template>
    <view class="hot-broadcast">
        <view class="df-cen-rl margin-bottom" v-if="headerType">
            <view class="recommend-title">直播带货</view>
            <view class="recommend-right" @click="jumpFn">
                更多
                <text class="lg cuIcon-right"></text>
            </view>
        </view>
        <view class="btnChange" v-if="showyg==true">
            <view class="jczb " :class="[type==0? 'active_btn':'']" @tap="changeLive(0)">精彩直播</view>
            <view class="zbyg " :class="[type==1? 'active_btn':'']" @tap="changeLive(1)">直播预告</view>
        </view>
        <view class="hot-broadcast-centon" v-if="type==0">
            <view class="hot-broadcast-row flex" v-for="(item, inx) in listArr" :key="inx" @click="itemBtn(item)">
                <view class="hot-row-left df-cen">
                    <image :src="item.image ? $util.img(item.image) : staticImgUrl + 'home/load_img.png'" class="row-left-img" mode="aspectFill"></image>
                    <view class="hot-row-left df-cen">
                        <image :src="item.image ? $util.img(item.image) : staticImgUrl + 'home/load_img.png'" class="row-left-img" mode="aspectFill"></image>
                        <view class="ygtimes live-left-top">
                            <view class="ygtitle" style="background: linear-gradient(90deg, #9B3DF2, #641BF5);" v-if="item.pushing==0">回看</view>
                            <view class="ygtitleTwos" style="background: linear-gradient(90deg, #FF7044, #FD3B5C);" v-if="item.pushing==1">
                                <image :src="staticImgUrl + 'live/ispushing.png'" style="width: 16rpx;height: 19rpx;margin-right: 6rpx;"></image>直播中
                            </view>
                            <view class="timer">{{ item.views }}人气</view>
                        </view>
                    </view>
                    <image :src="staticImgUrl + 'home/live_img.png'" class="hot-left-live"></image>
                </view>
                <view class="hot-row-right">
                    <view class="hot-right-header">
                        <avatar-name :name="item.nickname" :avatar="!item.thumb ? 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg' : $util.img(item.thumb)">
                        </avatar-name>
                    </view>
                    <view class="hot-right-bottom">
                        <view class="right-bottom-title line-text">{{ item.title }}</view>
                        <view class="df-ai-cen right-bottom-goods">
                            <view class="bottom-goods-item" v-for="(v, i) in item.goods" :key="i">
                                <image :src="$util.img(v.sku_image)" style="width: 100%;height: 100%;"></image>
                                <view class="goods-item-price">￥{{ v.price }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="hot-broadcast-centon" v-if="type==1&&showyg==true">
            <block v-if="listArrTwo.length>0">
                <view class="hot-broadcast-row flex" v-for="(item, inx) in listArrTwo" :key="inx" @click="itemBtnTwo(item)">
                    <view class="hot-row-left df-cen">
                        <image :src="item.image ? $util.img(item.image) : staticImgUrl + 'home/load_img.png'" class="row-left-img" mode="aspectFill"></image>
                        <view class="ygtimes live-left-top">
                            <view class="ygtitle">预告</view>
                            <view class="timer">{{$util.formatDateCount(item.starttime1*1000,'M.D h:m')}}</view>
                        </view>
                    </view>
                    <view class="hot-row-right">
                        <view class="hot-right-header">
                            <avatar-name :name="item.nickname" :avatar="!item.thumb ? 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg' : $util.img(item.thumb)">
                            </avatar-name>
                        </view>
                        <view class="hot-right-bottom">
                            <view class="right-bottom-title line-text">{{ item.title }}</view>
                            <view class="df-ai-cen right-bottom-goods">
                                <view class="bottom-goods-item" v-for="(v, i) in item.goods" :key="i">
                                    <image :src="$util.img(v.sku_image)" style="width: 100%;height: 100%;"></image>
                                    <view class="goods-item-price">￥{{ v.price }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <view class="df-col-cen" v-if="listArrTwo.length<=0">
                <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png" mode="" style="width: 408rpx;height: 244rpx;"></image>
                <view style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: rgb(153, 153, 153);text-align: center;padding-top: 30rpx;">
                    暂无数据</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
	data() {
		return {
			type: 0
			// listArrTwo:[]
		}
	},
	props: {
		showyg: {
			type: Boolean,
			default: true
		},
		listArr: {
			type: Array,
			default: () => {
				return []
			}
		},
		listArrTwo: {
			type: Array,
			default: () => {
				return []
			}
		},
		headerType: {
			type: Boolean,
			default: true
		}
	},
	mounted() {

	},
	methods: {
		jumpFn() {
			if (this.type == 0) {
				this.$util.redirectTo('/livePages/live/hotlive')

			} else {
				this.$util.redirectTo('/livePages/live/live-preview-list')
			}
		},
		itemBtn(val) {
			this.$emit('liveCall', val)
		},
		itemBtnTwo(item) {
			this.$util.redirectTo('/livePages/live/live-preview-details', {
				live_id: item.id
			})
		},
		changeLive(val) {
			this.type = val
			// if(val==1){
			// 	this.$Apis.getNoticeList({
			// 		page_index:1,
			// 		page_size:10
			// 	}).then(res=>{
			// 		this.listArrTwo = []
			// 		this.listArrTwo = res.list
			// 	})
			// }
		}
	}
}
</script>

<style lang="scss">
.hot-broadcast {
    .recommend-title {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
    }

    .recommend-right {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #fd3b5c;
    }

    .live-left-top {
        // width: 260rpx;
        max-width: 260rpx;
        position: absolute;
        top: 20rpx;
        left: 20rpx;
        padding: 2rpx 18rpx 2rpx 2rpx;
        font-size: 16rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 40rpx;
    }

    .hot-broadcast-centon {
        margin-bottom: 40rpx;

        .hot-broadcast-row {
            border-radius: 26rpx;
            background-color: #ffffff;
            margin-bottom: 20rpx;
        }

        .hot-row-left {
            width: 300rpx;
            // height: 320rpx;
            background-color: #eeeeee;
            border-top-left-radius: 26rpx;
            border-bottom-left-radius: 26rpx;
            position: relative;

            .row-left-img {
                border-top-left-radius: 26rpx;
                border-bottom-left-radius: 26rpx;
                width: 300rpx;
                height: 323rpx;
            }

            .hot-left-live {
                position: absolute;
                bottom: 14rpx;
                right: 26rpx;
                width: 44rpx;
                height: 44rpx;
            }
        }

        .hot-row-right {
            flex: 1;
            padding: 16rpx 20rpx 10rpx;
        }

        .hot-right-header {
            padding-bottom: 20rpx;
            border-bottom: 1px solid #eeeeee;

            .right-header-name {
                width: 300rpx;
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #222222;
            }
        }

        .hot-right-bottom {
            padding-top: 20rpx;
            width: 100%;

            .right-bottom-title {
                width: 400rpx;
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #222222;
            }

            .right-bottom-goods {
                padding-top: 32rpx;
            }

            .bottom-goods-item {
                position: relative;
                width: 120rpx;
                height: 110rpx;
                border-radius: 12rpx;
                background-color: #a0a0a0;
                margin-right: 20rpx;
            }

            .bottom-goods-item:nth-child(3) {
                margin-right: 0;
            }

            .goods-item-price {
                position: absolute;
                bottom: 0;
                width: 100%;
                font-size: 20rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                text-align: center;
                background: #000000;
                opacity: 0.4;
                border-bottom-left-radius: 12rpx;
                border-bottom-right-radius: 12rpx;
            }
        }
    }
}

.btnChange {
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;

    .jczb {
        width: 182rpx;
        height: 60rpx;
        background: #ffffff;
        border: 2rpx solid #eeeeee;
        border-radius: 29rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 58rpx;
        text-align: center;
    }

    .zbyg {
        width: 180rpx;
        height: 58rpx;
        background: #ffffff;
        border-radius: 29rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 58rpx;
        text-align: center;
        margin-left: 30rpx;
    }

    .active_btn {
        background: linear-gradient(90deg, #ff7044, #fd3b5c);
        color: #ffffff;
    }
}

.ygtimes {
    display: flex;
    align-items: center;

    .ygtitle {
        width: 56rpx;
        height: 30rpx;
        background: linear-gradient(90deg, #0ae58b, #21c262);
        font-size: 16rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        border-radius: 12rpx;
        border-top-right-radius: 0rpx;
        border-bottom-right-radius: 0rpx;
        line-height: 30rpx;
        text-align: center;
        white-space: nowrap;
    }

    .timer {
        // width: 124rpx;
        font-size: 18rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        padding-left: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ygtitleTwos {
        width: 120rpx;
        height: 30rpx;
        background: linear-gradient(90deg, #ff7044, #fd3b5c);
        font-size: 18rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        border-radius: 12rpx;
        border-top-right-radius: 0rpx;
        border-bottom-right-radius: 0rpx;
        line-height: 30rpx;
        text-align: center;
        white-space: nowrap;
    }
}
</style>
